<template>
  <div class="box">
      <!-- 全民砍价 -->
      <div class="top">
          <span @click="goAllBar">全民砍价></span>
        </div>
      <div class="content">
          <div class="content-item" 
          v-for="(item,index) in getBargainirg.slice(11,14)" 
          :key="index" 
          @click="go_details(item)">
            
            <img :src="item.pic">

              <div class="right">
                  <p class="p1">{{item.name}}</p>
                  <p class="p2">{{item.characteristic}}</p>
                  <div class="right-con">
                    <div><p style="color:red;">￥{{item.minPrice}}</p>
                    <p>低价</p></div>
                         
                    <div><p>￥{{item.originalPrice}}</p>
                    <p>原价</p></div> 
                         
                    <div><p>{{item.stores}}件</p>
                    <p>限量</p></div>
                         
                  </div>
              </div>
          </div>
      </div>
  </div>
</template>

<script>
export default {
    computed:{
        getBargainirg:function(){
           return this.$store.state.homeStore.bargainirg
        }
    },
    //请求全民砍价里的数据
    mounted(){
    this.$store.dispatch("getBargainirg")
    },
    methods:{
        goAllBar(){
            this.$router.push({
                path:"/allBar"
            })
        },
        go_details(item){
            this.$emit("go_details",item.id),
            
            this.$loading();
        }
    }
}
</script>

<style scoped>
.box{
    background-color: #fff!important;
}
.top{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 0.65rem;
    text-align: center;
}
.top span{
    margin: 0 auto;
    font-size: 0.3rem;
}
.content{
    width: 100%;
    height: 7rem;
}
.content-item{
    display: flex;
    border-top: 1px solid lightgray;
    padding: 0.14rem;
    height: 2rem;
}
.content-item img{
    width: 1.58rem;
    height: 1.58rem;
}
.right{
    flex: 1;
    margin-left: 0.3rem;
}
p{
    margin: 0px;
    padding: 0px;
}
.p1{
    font-size: 0.2rem;
}
.p2{
    font-size: 0.15rem;
    color: #b2b2b2;
    margin-top: 0.1rem;
}
.right-con{
    width: 3rem;
    height: 2.4rem;
    display:inline-flex;
    justify-content: space-around;
    flex-wrap: wrap;
}
.right-con div{
    width: 1rem;
    height: 100%;
    margin-top: 0.2rem;
}
.right-con div p{
    font-size:0.2rem;
}

</style>